<template>
	<view class="container" style="position: relative;">
		<navBar title="維修記錄" @goBack="uni.navigateBack()" :num="badgeNumber"></navBar>
		<view class="examination-approval-list" :style="{height:scrollHeight }">
			<view class="search-content">
				<view class="search">
					<u-icon name="search" color="#a7aebd" size="26"></u-icon>
					 <u--input @change="search" v-model="keyword" placeholder="请输入病害編號" border="surround" @clear="clearKey" clearable :customStyle="{border: 'none'}"></u--input>
				</view>
				<view @click="popup = true" class="option">
					<view>{{ stateText || '需返工' }}</view>
					<u-icon name="arrow-down" color="#2f80ed" size="18"></u-icon>
				</view>
			</view>
			
			<scroll-view @scrolltolower="scrolltolower" class="scroll-view" scroll-y>
				<view>
					<view v-for="(item, index) in constructionPlanList" :key="index" class="item-content" @click="goRepair(item)">
						<view class="title">
							<view class="text-overflow">
							<view style="display: flex;align-items: center;">
								<view class="label">站點位置：{{ item.lineSiteSectionName || '' }}</view>
								<view class="icon">{{ item.priority || '' }}</view>
							</view>
							</view>
							<view class="state orange">{{ item.taskStateName }}</view>
						</view>
						<view class="label">病害編號：{{ item.diseaseNo }}</view>
						<view class="label">维修日期：{{ getDate(item.repairDate, 1) }}</view>
						<view class="label">提交人：{{ item.createUserName }}</view>
						<view class="btn" v-if="item.taskStateName === '需返工'">重新上报</view>
					</view>
					<u-empty v-if="!constructionPlanList.length" mode="data" text="數據爲空" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
				</view>
			</scroll-view>
		</view>	
		<u-picker :immediateChange="true" :show="popup"  :columns="optionData" keyName="name" @confirm="confirm" @cancel="popup = false"></u-picker>
	</view>
</template>

<script>
	import { handleFormatDate } from "@/utils/date.js"
	import { getSystemHeightInfo } from "@/utils/common.js"
	import { hkRepairTask_getRepairRecord } from "@/api/HongKong/hkAttendanceSheet.js";
	import mixins from "@/utils/mixins"
	export default {
		mixins: [mixins],
		data() {
			return {
				paging: {
					pageNum: 1,
					pageSize: 10,
					total: 0,
				},
				keyword: '',
				systemInfo: {},
				constructionPlanList: [],
				stateText:'需返工',
				taskState:'task_state_xfg',
				popup:false,
				optionData: [[]],
				badgeNumber:''
			}
		},
		onShow() {
			this.systemInfo = getSystemHeightInfo()
			this.search()
		},
		mounted() {
			this.optionData = [this.$store.getters.dictMap['task_state']]
			console.log(this.optionData)
			this.getBadgeNum()
		},
		computed: {
			scrollHeight() {
				// #ifdef APP-PLUS  || H5 
					return `calc(100% - ${this.systemInfo.navbarHeight}px - ${this.systemInfo.stateHeight}px)`
				// #endif 
				// #ifdef MP-WEIXIN 
					return `calc(100% - ${this.systemInfo.navbarHeight}px - ${this.systemInfo.stateHeight}px + 50px)`
				// #endif 
			}
		},
		methods: {
			getBackState(val) {
				console.debug(val)
				this.search()
				this.getBadgeNum()
			},
			goRepair(obj) {
				let bool = obj.taskStateName == '需返工' ? true : false
				console.log(bool)
				uni.navigateTo({
					url:`/subpackage-enginner/pages/engineeringMaintenance/hongKong/diseaseRepair?id=${obj.id}&pmName=${obj.pmName}&orderType=${obj.orderType}&taskStateName=${bool}&docId=${obj.docId || ''}`
				})
			},
			

			confirm(val){
				console.log(val)
				this.taskState = val.value[0].code
				this.stateText = val.value[0].name
				this.getConstructionPlanArray()
				this.popup = false
			},
			search() {
				this.constructionPlanList = []
				this.paging.pageNum = 1
				this.getConstructionPlanArray()
			},
			clearKey() {
				this.keyword = ''
				this.paging.pageNum = 1
				this.constructionPlanList = []
				this.getConstructionPlanArray()
			},
			scrolltolower() {
				if (this.paging.pageNum * this.paging.pageSize < this.paging.total) {
					this.paging.pageNum++
					this.getConstructionPlanArray()
				}
			},
			getConstructionPlanArray() {
				const { pageNum, pageSize } = this.paging
				hkRepairTask_getRepairRecord({
					currPage: pageNum,
					pageSize,
					params: {
						taskStates:[this.taskState],
						diseaseNo:this.keyword,
						projectId: uni.getStorageSync('isOwner')
					}
				}).then(res => {
					if (res && res.result) {
						this.constructionPlanList = res.result.list
						
					}
				})
			},
			getBadgeNum() {
				hkRepairTask_getRepairRecord({
					currPage: 1,
					pageSize:1,
					params: {
						taskStates:['task_state_xfg'],
						projectId: uni.getStorageSync('isOwner')
					}
				}).then(res => {
					if (res && res.result) {
						this.badgeNumber = res.result.total.toString()
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		box-sizing: border-box;
		height: 100vh;
		overflow: hidden;
		/* #ifdef MP-WEIXIN */
		padding-top: 200rpx;
		/* #endif */
	}
	.examination-approval-list {
		box-sizing: border-box;
		border-top: 15px solid #f5f7fa;
		background: #fff;
		font-size: 16px;
		height: 100%;
		.text-overflow {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			.icon {
				margin-left: 20rpx;
				width: 50rpx;
				padding: 6rpx 20rpx;
				clip-path: polygon(15rpx 0, 100% 0, calc(100% - 15rpx) 52rpx, 0% 52rpx);
				height: 24rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 24rpx;
				background: linear-gradient(90deg, #ff5f2c 0%, #ff9e39 100%);
				text-align: center;
				opacity: 1;
			}
		}
		.search-content {
			height: 69px;
			padding: 0 8px 0 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.search {
				display: flex;
				align-items: center;
				background: #f5f7fa;
				border-radius: 25px;
				margin-right: 6px;
				padding: 10px 12px;
				box-sizing: border-box;
				height: 44px;
				line-height: 44px;
				flex: 1;
			}
			.option {
				height: 44px;
				line-height: 44px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #f5f7fa;
				border-radius: 25px;
				width: 100px;
				box-sizing: border-box;
				padding: 0 14px;
				flex-shrink: 0;
				white-space: nowrap;
				view {
					color: #2f80ed;
				}
				
			}
		}
		.scroll-view {
			height: calc(100% - 15px - 69px);
			border-top: 12px solid #f5f7fa;
			box-sizing: border-box;
			padding: 0 14px;
			.item-content {
				padding: 14px 12px 14px;
				border-bottom: 1px solid #E3E5E8;
				box-sizing: border-box;
				.title {
					height: 28px;
					line-height: 28px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.state {
						border-radius: 0 4px 0 4px;
						font-weight: bold;
						padding: 0 4px;
						line-height: 22px;
						// margin-right: 12px;
						flex-shrink: 0;
						color: #fff;
						font-size: 14px;
						&.orange {
							background: #ff8a2c;
						}
					}
					.text-overflow {
						flex: 1;
						color: #445469;
						font-weight: bold;
						// max-width: 400rpx;
					}
				}
				.date {
					height: 20px;
					line-height: 20px;
					padding: 10px 0 9px;
					color: #6a819e;
					display: flex;
					align-items: center;
					font-size: 13px;
					.date-text {
						margin-left: 3px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						width: calc(100% - 20px);
					}
				}
				.label {
					line-height: 29px;
					color: #6f747b;
					font-weight: bold;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 14px;
				}
				.btn {
					margin-top: 20rpx;
					width: 184rpx;
					height: 64rpx;
					background: #2F80ED;
					border-radius: 100rpx;
					font-weight: 500;
					font-size: 14px;
					color: #FFFFFF;
					text-align: center;
					line-height: 64rpx;
				}
				.btn-content {
					display: flex;
					align-items: center;
					font-weight: 500;
					margin-top: 15px;
					text-align: center;
					font-size: 14px;
					> view {
						line-height: 34px;
						width: 100px;
						margin-right: 11px;
						border-radius: 50px;
					}
					.gray {
						color: #445469;
						background: #f5f7fa;
					}
					.blue {
						color: #fff;
						background: #2f80ed;
					}
				}
			}
		}
	}
		
</style>
